<html>

<head>
    <meta name="description" content="JavaScript----Vue.js基础学习 🚀--Alger的博客">
    <meta name="keywords"
        content="Alger,Alger的博客,Alger's blog,alger,alger的博客,html,css,vue,刘俊杰的博客,刘俊杰,liujunjie,Alger开发,Android,刘先生">

    <meta charset="utf-8" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>JavaScript----Vue.js基础学习 🚀 | Alger&#39;s blog</title>

<link rel="shortcut icon" href="http://www.myalger.ml/favicon.ico?v=1602725656399">

<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.myalger.ml/styles/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets/highlight.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.15.10/languages/dockerfile.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.15.10/languages/dart.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/moment@2.27.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
<!-- DEMO JS -->
<!--<script src="media/scripts/index.js"></script>-->


    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.css">
</head>

<body>
    <div class="main gt-bg-theme-color-first">
        <nav class="navbar navbar-expand-lg">
    <div class="navbar-brand">
        <img class="user-avatar" src="/images/avatar.png" alt="头像">
        <div class="site-name gt-c-content-color-first">
            Alger&#39;s blog
        </div>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fas fa-bars gt-c-content-color-first" style="font-size: 18px"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <div class="navbar-nav mr-auto" style="text-align: center">
            
                <div class="nav-item">
                    
                        <a href="/" class="menu gt-a-link">
                            首页
                        </a>
                    
                </div>
            
                <div class="nav-item">
                    
                        <a href="/archives" class="menu gt-a-link">
                            归档
                        </a>
                    
                </div>
            
                <div class="nav-item">
                    
                        <a href="/tags" class="menu gt-a-link">
                            标签
                        </a>
                    
                </div>
            
                <div class="nav-item">
                    
                        <a href="http://www.myalger.ml/about" class="menu gt-a-link">
                            关于
                        </a>
                    
                </div>
            
        </div>
        <div style="text-align: center">
            <form id="gridea-search-form" style="position: relative" data-update="1602725656399" action="/search/index.html">
                <input class="search-input" autocomplete="off" spellcheck="false" name="q" placeholder="搜索文章" />
                <i class="fas fa-search gt-c-content-color-first" style="position: absolute; top: 9px; left: 10px;"></i>
            </form>
        </div>
    </div>
</nav>

        <div class="post-container">
            <div class="post-detail gt-bg-theme-color-second">
                <article class="gt-post-content">
                    <h2 class="post-title">
                        JavaScript----Vue.js基础学习 🚀
                    </h2>
                    <div class="post-info">
                        <time class="post-time gt-c-content-color-first">
                            · 2020-03-13 ·
                        </time>
                        
                        <a href="http://www.myalger.ml/He-D_m5QM/" class="post-tags">
                            # JavaScript
                        </a>
                        
                        <a href="http://www.myalger.ml/p9SDW22Ljl/" class="post-tags">
                            # Vue.js
                        </a>
                        
                    </div>
                    <div class="post-content">
                        <p>Vue 是一套用于构建用户界面的渐进式框架Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。能够为复杂的单页应用提供驱动。</p>
<!-- more -->
<h3 id="第一个vue项目">第一个Vue项目</h3>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src=&quot;index.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p id=&quot;app&quot;&gt;
    {{massage}}
&lt;/p&gt;

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;&gt;&lt;/script&gt;

&lt;script&gt;
    let app = new Vue({
        el:'#app',
        data:{
            massage:&quot;Hello World!&quot;
        }
    })
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h3 id="el挂载点">el挂载点：</h3>
<p>vue实例的<strong>作用范围</strong>是：<strong>el</strong>选项<strong>命中的元素</strong>及其内部的<strong>后代元素</strong></p>
<blockquote>
<p>Vue可以使用其他的选择器，最好是使用ID选择器</p>
<p>可以使用双标签，不能使用HTML和body</p>
</blockquote>
<h3 id="data数据对象">data:数据对象</h3>
<pre><code class="language-html">&lt;div id=&quot;app&quot;&gt;
    {{massage}}
    &lt;h1&gt;{{school.name}}&lt;/br&gt;{{school.mobile}}&lt;/h1&gt;
	&lt;ul&gt;
        &lt;li&gt;{{ campus[0] }}&lt;/li&gt;
        &lt;li&gt;{{ campus[2] }}&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;


&lt;script&gt;
    let app = new Vue({
        el:'#app',
        data:{
            massage:&quot;Hello World!&quot;,
            school:{
                name:&quot;刘俊杰&quot;,
                mobile:&quot;1455048564&quot;
            },
            campus:[&quot;山西&quot;,&quot;徐州&quot;,&quot;长治&quot;]
        }
    });
&lt;/script&gt;
</code></pre>
<figure data-type="image" tabindex="1"><img src="https://s2.ax1x.com/2020/02/20/3ZhcQg.png" alt="3ZhcQg.png" loading="lazy"></figure>
<h3 id="v-text指令">v-text指令</h3>
<p><strong>使用了v-text属性之后标签中的文字不再显示</strong></p>
<p><strong>v-text</strong> 和 **{{}}**中都可以使用表达式       如：字符串拼接</p>
<pre><code class="language-html"> &lt;div id=&quot;app&quot;&gt;
     &lt;h2 v-text=&quot;message+'！帅哥'&quot;&gt;&lt;/h2&gt;
     &lt;h2 v-text=&quot;info&quot;&gt;&lt;/h2&gt;
     &lt;h2&gt;{{ message }}&lt;/h2&gt;
&lt;/div&gt;

&lt;script&gt;
    let app = new Vue({
        el: &quot;#app&quot;,
        data: {
            message: &quot;刘俊杰&quot;,
            info: &quot;移动应用开发&quot;
        }
    })
&lt;/script&gt;
</code></pre>
<figure data-type="image" tabindex="2"><img src="https://uploader.shimo.im/f/wGGSdzJpVccxox3Z.png!thumbnail" alt="效果图" loading="lazy"></figure>
<h3 id="v-html指令">v-html指令</h3>
<figure data-type="image" tabindex="3"><img src="https://uploader.shimo.im/f/Lc7l7PZgdn49K4oZ.png!thumbnail" alt="" loading="lazy"></figure>
<pre><code class="language-html">	&lt;div id=&quot;app&quot;&gt;
        &lt;p v-html=&quot;message&quot;&gt;&lt;/p&gt;
        &lt;p v-html=&quot;content&quot;&gt;&lt;/p&gt;
    &lt;/div&gt;

	 &lt;script&gt;
        let app = new Vue({
            el:&quot;#app&quot;,
            data:{
                message:&quot;Hello World&quot;,
                content:&quot;&lt;a href='http://www.baidu.com'&gt;百度&lt;/a&gt;&quot;
            }
        })
    &lt;/script&gt;
</code></pre>
<figure data-type="image" tabindex="4"><img src="https://uploader.shimo.im/f/5PmVPlH8rWkokEgk.png!thumbnail" alt="" loading="lazy"></figure>
<h3 id="v-on指令">v-on指令</h3>
<p>可以简写为@</p>
<figure data-type="image" tabindex="5"><img src="https://uploader.shimo.im/f/RksEn7sRq0MADs10.png!thumbnail" alt="" loading="lazy"></figure>
<figure data-type="image" tabindex="6"><img src="https://uploader.shimo.im/f/zkReSAbLUxMpMLVq.png!thumbnail" alt="" loading="lazy"></figure>
<pre><code class="language-html">	&lt;div id=&quot;app&quot;&gt;
        &lt;input type=&quot;button&quot; value=&quot;v-on指令&quot; v-on:click=&quot;doIt&quot;&gt;
        &lt;input type=&quot;button&quot; value=&quot;v-on指令简写为 @&quot; @click=&quot;doIt&quot;&gt;
        &lt;input type=&quot;button&quot; value=&quot;v-on双击&quot; @dblclick=&quot;doIt&quot;&gt;
        &lt;h2 @click=&quot;changeFood&quot;&gt;{{ food }}&lt;/h2&gt;
    &lt;/div&gt;

    &lt;script&gt;
        let app = new Vue({
            el:&quot;#app&quot;,
            data:{
                food:&quot;西红柿炒鸡蛋&quot;
            },
            methods:{
                doIt:function(){
                    alert(&quot;hello&quot;);
                },
                changeFood:function(){
                    this.food+=&quot;非常好吃！！&quot;
                }
            }
        })
    &lt;/script&gt;
</code></pre>
<pre><code class="language-html">	&lt;div id=&quot;app&quot;&gt;
        &lt;input type=&quot;button&quot; value=&quot;dianji&quot; @click=&quot;doIt(666,'老铁')&quot;&gt;
        &lt;input type=&quot;text&quot; @keyup.enter=&quot;sayHi&quot; name=&quot;&quot; id=&quot;&quot;&gt;
    &lt;/div&gt;

    &lt;script src=&quot;js/vue.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        let app = new Vue({
            el:&quot;#app&quot;,
            data:{

            },
            methods:{
                doIt:function(p1,p2){
                    console.log(&quot;做it&quot;);
                    console.log(p1);
                    console.log(p2);
                },
                sayHi:function(){
                    alert(&quot;吃了没&quot;);
                }
            }
        })
    &lt;/script&gt;

</code></pre>
<h3 id="案例计数器">案例计数器</h3>
<pre><code class="language-html">	&lt;div id=&quot;app&quot;&gt;
        &lt;button @click=&quot;redNum&quot;&gt;-&lt;/button&gt;
        &lt;span&gt;{{ num }}&lt;/span&gt;
        &lt;button @click=&quot;addNum&quot;&gt;+&lt;/button&gt;
    &lt;/div&gt;

    &lt;script&gt;    
        let app = new Vue({
            el:&quot;#app&quot;,
            data:{
                num:0   
            },
            methods:{
                addNum:function(){
                    if(this.num&lt;10){
                        this.num++;
                    }else{
                        alert(&quot;已经最大了，不要再点了&quot;);
                    }
                },
                redNum:function(){
                    if(this.num&gt;0){
                        this.num--;
                    }else{
                        alert(&quot;已经最小了，不要再点了&quot;);
                    }
                }
                
            }
        })
    &lt;/script&gt;
</code></pre>
<figure data-type="image" tabindex="7"><img src="https://uploader.shimo.im/f/06z8aCxE2I4BB6Rt.png!thumbnail" alt="" loading="lazy"></figure>
<figure data-type="image" tabindex="8"><img src="https://uploader.shimo.im/f/9adZUzga8y0Sth8W.png!thumbnail" alt="" loading="lazy"></figure>
<h3 id="v-show">v-show</h3>
<p><strong>控制元素的显示状态</strong> 只是操作样式</p>
<figure data-type="image" tabindex="9"><img src="https://uploader.shimo.im/f/eRJzOgqhmboH0KnB.png!thumbnail" alt="" loading="lazy"></figure>
<pre><code class="language-html">	&lt;div id=&quot;app&quot;&gt;
        &lt;input type=&quot;button&quot; value=&quot;隐藏或显示&quot; @click=&quot;clickShow&quot;&gt;
        &lt;input type=&quot;button&quot; value=&quot;age++++++&quot; @click=&quot;addAge&quot;&gt;
        &lt;h1 v-show=&quot;isShow&quot; style=&quot;background: red; color: white;&quot;&gt;Hello world&lt;/h1&gt;
        &lt;h1 v-show=&quot;age&lt;=18&quot; style=&quot;background: red; color: white;&quot;&gt;Hello world!!!!!!!!!!!!!&lt;/h1&gt;
        
    &lt;/div&gt;
    &lt;script src=&quot;js/vue.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        let app = new Vue({
            el:&quot;#app&quot;,
            data:{
                isShow:false,
                age:18
            },
            methods:{
                clickShow:function(){
                    this.isShow = !this.isShow;
                },
                addAge:function(){
                    this.age++;
                }
            }
        })

    &lt;/script&gt;
</code></pre>
<h3 id="v-if">v-if</h3>
<p>和 <strong>v-show</strong>显示效果相同但是 <strong>v-if</strong>是直接操控DOM把标签移除</p>
<figure data-type="image" tabindex="10"><img src="https://uploader.shimo.im/f/Qu3hulmkhiMx7ZjK.png!thumbnail" alt="" loading="lazy"></figure>
<pre><code class="language-html">	&lt;div id=&quot;app&quot;&gt;
        &lt;input type=&quot;button&quot; value=&quot;隐藏或显示&quot; @click=&quot;clickShow&quot;&gt;
        &lt;input type=&quot;button&quot; value=&quot;age++++++&quot; @click=&quot;addAge&quot;&gt;
        &lt;h1 v-if=&quot;isShow&quot; style=&quot;background: red; color: white;&quot;&gt;Hello world&lt;/h1&gt;
        &lt;h1 v-if=&quot;age&lt;=18&quot; style=&quot;background: red; color: white;&quot;&gt;Hello world!!!!!!!!!!!!!&lt;/h1&gt;
        
    &lt;/div&gt;
    &lt;script src=&quot;js/vue.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        let app = new Vue({
            el:&quot;#app&quot;,
            data:{
                isShow:false,
                age:18
            },
            methods:{
                clickShow:function(){
                    this.isShow = !this.isShow;
                },
                addAge:function(){
                    this.age++;
                }
            }
        })

    &lt;/script&gt;
</code></pre>
<h3 id="v-bind">v-bind</h3>
<figure data-type="image" tabindex="11"><img src="https://uploader.shimo.im/f/Ogm51R70KooXrw0g.png!thumbnail" alt="" loading="lazy"></figure>
<pre><code class="language-html">	&lt;style&gt;
        .active{
            border:5px red solid;
        }
    &lt;/style&gt;

	&lt;div id=&quot;app&quot;&gt;
        &lt;img v-bind:src=&quot;imgSrc&quot; v-bind:title=&quot;imgTitle&quot;&gt;
        &lt;img :src=&quot;imgSrc&quot; :title=&quot;imgTitle&quot; :class=&quot;isActive?'active':''&quot;  @click=&quot;toggleActive&quot;&gt;
        &lt;img :src=&quot;imgSrc&quot; :title=&quot;imgTitle&quot; :class=&quot;{active:isActive}&quot;  @click=&quot;toggleActive&quot;&gt;
    &lt;/div&gt;

    &lt;script src=&quot;js/vue.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        let app = new Vue({
            el:&quot;#app&quot;,
            data:{
                imgSrc:&quot;https://uploader.shimo.im/f/DobrHAZrCe80Nbuy.png!thumbnail&quot;,
                imgTitle:&quot;alger空城&quot;,
                isActive:false
            },
            methods:{
                toggleActive:function(){
                    this.isActive = !this.isActive;
                }
            }
        })
    &lt;/script&gt;
</code></pre>
<h3 id="图片轮播案例">图片轮播案例</h3>
<pre><code class="language-html"> 	&lt;div id=&quot;app&quot;&gt;
        &lt;img :src=&quot;imgArr[imgIndex]&quot; alt=&quot;&quot;&gt;
        &lt;a class=&quot;prev&quot; @click=&quot;prev&quot; v-show=&quot;imgIndex!=0&quot;&gt;《&lt;/a&gt;
        &lt;a class=&quot;next&quot; @click=&quot;next&quot; v-show=&quot;imgIndex&lt;imgArr.length-1&quot;&gt;》&lt;/a&gt;
    &lt;/div&gt;

    &lt;script src=&quot;js/vue.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        let app = new Vue({
            el: &quot;#app&quot;,
            data: {
                imgArr: [&quot;https://i2.hdslb.com/bfs/archive/ceb867882b8619edbbc271565d1e216e80eb9f7c.jpg@206w_116h_1c_100q.jpg&quot;,
                    &quot;https://i0.hdslb.com/bfs/archive/55656cda5efd43577bf1a34302c2c6c10c37d13d.jpg@206w_116h_1c_100q.jpg&quot;,
                    &quot;https://i0.hdslb.com/bfs/archive/bc20d43d3508e8413a1cfc9bfca4ae7a58495098.jpg@206w_116h_1c_100q.jpg&quot;
                ],
                imgIndex: 0
            },
            methods: {
                prev: function () {
                    this.imgIndex--;
                },
                next: function () {
                    this.imgIndex++;
                }
            }
        })
    &lt;/script&gt;
</code></pre>
<figure data-type="image" tabindex="12"><img src="https://uploader.shimo.im/f/SSVs0R8WJ3AMq3ZI.png!thumbnail" alt="``" loading="lazy"></figure>
<h3 id="v-for">v-for</h3>
<p><strong>根据数据生成列表结构</strong></p>
<figure data-type="image" tabindex="13"><img src="https://uploader.shimo.im/f/wPGHtLe0P94rXtEB.png!thumbnail" alt="" loading="lazy"></figure>
<pre><code class="language-html">	 &lt;div id=&quot;app&quot;&gt;
        &lt;ul&gt;
            &lt;button @click=&quot;add&quot;&gt;添加数据&lt;/button&gt;
            &lt;button @click=&quot;remove&quot;&gt;移除数据&lt;/button&gt;

            &lt;!-- item可以自定义 index是序列号，in为必须 arr是data数据 --&gt;
            &lt;li v-for=&quot;(item,index) in arr&quot;&gt;
                {{ index+1 }}刘俊杰:{{item}}
            &lt;/li&gt;
            &lt;h2 v-for=&quot;item in food&quot; :title=&quot;item.name&quot;&gt;
                {{item.name}}
            &lt;/h2&gt;
        &lt;/ul&gt;
    &lt;/div&gt;

    &lt;script src=&quot;js/vue.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        let app = new Vue({
            el: &quot;#app&quot;,
            data: {
                arr: [&quot;北京&quot;, &quot;上海&quot;, &quot;广州&quot;, &quot;深圳&quot;],
                food: [
                    { name: &quot;西红柿炒鸡蛋&quot; },
                    { name: &quot;鱼香肉丝&quot; }
                ]
            },
            methods: {
                add:function(){
                    //增加数据
                    this.food.push({name:&quot;宫保鸡丁&quot;});
                },
                remove:function(){
                    //移除数据
                    this.food.shift();
                }
            }
        })
    &lt;/script&gt;
</code></pre>
<h3 id="v-model">v-model</h3>
<p>获取和设置表单元素的值（<strong>双向数据绑定</strong>）同步更新</p>
<blockquote>
<p>双向绑定，一个更改了，另一个也会改变</p>
</blockquote>
<figure data-type="image" tabindex="14"><img src="https://uploader.shimo.im/f/voTcHNf28Uo83dso.png!thumbnail" alt="" loading="lazy"></figure>
<pre><code class="language-html"> &lt;div id=&quot;app&quot;&gt;
        &lt;input type=&quot;text&quot; v-model=&quot;message&quot; @keyup.enter=&quot;getM&quot;&gt;
        &lt;h2&gt;{{ message }}&lt;/h2&gt;
        &lt;button @click=&quot;setM&quot;&gt;修改message&lt;/button&gt;
    &lt;/div&gt;

    &lt;script src=&quot;js/vue.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        let app = new Vue({
            el:&quot;#app&quot;,
            data:{
                message:&quot;黑马程序员&quot;
            },
            methods:{
                getM:function(){
                    alert(this.message);
                },
                setM:function(){
                    this.message=&quot;刘俊杰&quot;;
                }
            }
        })
    &lt;/script&gt;
</code></pre>
<h3 id="记事本案例">记事本案例</h3>
<figure data-type="image" tabindex="15"><img src="https://uploader.shimo.im/f/9tskDPwP9AMLlKfe.png!thumbnail" alt="" loading="lazy"></figure>
<pre><code class="language-html">	&lt;style&gt;
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f1f1f1;
        }

        h1 {
            text-align: center;
            line-height: 2em;
            font-weight: normal;
            font-size: 50px;
            color: #a34444;
        }

        #app {
            position: relative;
            width: 500px;
            margin: 0 auto;
            background-color: #ffffff;
            border: #bdbbbb 1px solid;
            border-radius: 3px;
            color: #6d6c6c;
        }

        .app1 {
            width: 500px;
            height: 70px;
            overflow: hidden;
            margin: 0 auto;
            box-sizing: border-box;
            border-bottom: #e6e4e4 2px solid;
            
        }

        .app1&gt;input {
            width: 500px;
            height: 45px;
            padding: 10px 0;
            border: none;
            outline: none;
            background-color: rgba(0, 0, 0, 0);
            font-size: 25px;
            padding-left: 20px;
            color: #6d6c6c;
        }

        .bottom1 {
            width: 490px;
            height: 10px;
            background-color: #ffffff;
            border: #bdbbbb 1px solid;
            border-radius: 3px;
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            box-sizing: border-box;
            bottom: -7px;
            z-index: -1;
        }

        .bottom2 {
            width: 475px;
            height: 10px;
            background-color: #ffffff;
            border: #bdbbbb 1px solid;
            border-radius: 3px;
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            box-sizing: border-box;
            bottom: -14px;
            z-index: -2;
        }

        .main&gt;ul {
            list-style: none;
        }

        .main&gt;ul li {
            width: 100%;
            height: 70px;
            line-height: 70px;
            font-size: 25px;
            font-weight: 300;
            border-top: #e6dddd 1px solid;
        }

        .main&gt;ul li:nth-child(1) {
            border-top: none;
        }

        .main&gt;ul li span {
            width: 60px;
            text-align: center;
            display: inline-block;
        }

        .main&gt;ul li button {
            float: right;
            margin: 25px 15px;
            color: red;
            background: transparent;
            border: none;
            display: none;
            cursor: pointer;
            outline: none;
        }
        .main&gt;ul li:hover{
            background-color: #edeaea;
        }
        .main&gt;ul li:hover button {
            display: block;
        }
        .main&gt;ul .num-clear{
            height: 30px;
            border-top: #e6dddd 1px solid;
            color: #6d6c6c;
            line-height: 30px;
            font-weight: 300;
            padding: 0 20px;
            font-size: 12px;
        }
        .num-clear .left{
            float: left;
        }
        .num-clear .right{
            float: right;
            cursor: pointer;
        }
    &lt;/style&gt;
	&lt;h1&gt;Alger记事本&lt;/h1&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;div class=&quot;app1&quot;&gt;
            &lt;!-- 回车添加 --&gt;
            &lt;input v-model=&quot;inputValue&quot; @keyup.enter=&quot;add&quot; type=&quot;text&quot; placeholder=&quot;请输入任务&quot;&gt;
            &lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;section class=&quot;main&quot;&gt;
            &lt;ul&gt;
                &lt;li class=&quot;todo&quot; v-for=&quot;(item,index) in list&quot;&gt;
                    &lt;span&gt;{{ index+1 }}.&lt;/span&gt;
                    &lt;label&gt;{{ item }}&lt;/label&gt;
                    &lt;!-- 删除 --&gt;
                    &lt;button @click=&quot;remove(index)&quot; class=&quot;destory&quot;&gt;✘&lt;/button&gt;
                &lt;/li&gt;
                &lt;div class=&quot;num-clear&quot;&gt;
                    &lt;span class=&quot;left&quot; v-show=&quot;list.length!=0&quot;&gt;
                        &lt;!-- 显示个数 --&gt;
                        &lt;strong&gt;{{ list.length }}&lt;/strong&gt; 条任务
                    &lt;/span&gt;
                    &lt;!-- 清空 --&gt;
                    &lt;span class=&quot;right&quot; @click=&quot;clear&quot; v-show=&quot;list.length!=0&quot;&gt;clear&lt;/span&gt;
                &lt;/div&gt;
            &lt;/ul&gt;
        &lt;/section&gt;
        &lt;!-- 底部装饰 --&gt;
        &lt;div class=&quot;bottom1&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;bottom2&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;


    &lt;script src=&quot;js/vue.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        let app = new Vue({
            el: &quot;#app&quot;,
            data: {
                list: [&quot;写代码&quot;, '吃饭饭', &quot;睡觉觉&quot;],
                inputValue:&quot;&quot;
            },
            methods: {
                add:function(){
                    this.list.push(this.inputValue);
                },
                remove:function(index){
                    //删除指定元素  ，index是由v-for所生成的
                    this.list.splice(index,1);
                },
                clear:function(){
                    this.list=[];
                }
            }
        })
    &lt;/script&gt;
</code></pre>
<h3 id="计算属性">计算属性</h3>
<p><code>computed:</code>可以实现计算</p>
<pre><code class="language-js">let app = new Vue({
    el:&quot;#app&quot;,
    data:{
        math:80,
        english:20,
        physics:50
    },
    methods:{

    },
    computed:{
        sum: function () {
            return this.math+this.english+this.physics;
        },
        avg: function () {
            return Math.round(this.sum/3);
        }
    }
})
</code></pre>
<pre><code class="language-html">&lt;tbody&gt;
    &lt;tr&gt;
        &lt;td&gt;数学&lt;/td&gt;
        &lt;td&gt;&lt;input type=&quot;text&quot; v-model=&quot;math&quot;/&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;英语&lt;/td&gt;
        &lt;td&gt;&lt;input type=&quot;text&quot; v-model=&quot;english&quot;/&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;物理&lt;/td&gt;
        &lt;td&gt;&lt;input type=&quot;text&quot; v-model=&quot;physics&quot;/&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;总分&lt;/td&gt;
        &lt;td&gt;{{sum}}&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;平均分&lt;/td&gt;
        &lt;td&gt;{{avg}}&lt;/td&gt;
    &lt;/tr&gt;
&lt;/tbody&gt;
</code></pre>
<h3 id="vue组件">*Vue组件</h3>
<p>组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 我们可以在一个通过 <code>new Vue</code> 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：</p>
<pre><code class="language-js">//新建一个组件名为button-counter，data必须用函数来返回
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
    //组件写在这个属性里
  template: '&lt;button v-on:click=&quot;count++&quot;&gt;You clicked me {{ count }} times.&lt;/button&gt;'
});
//用一个vue实例才能调用
new Vue({ el: '#components-demo' });
</code></pre>
<p>然后我们就可以在html中直接写<code>&lt;button-counter&gt;&lt;/button-counter&gt;</code>标签即可，当然标签需要写在一个vue的实例中</p>
<p>但是这样做他会在每个vue实例中都会显示，我们也可以把它绑定在一个vue实例中</p>
<pre><code class="language-js">/*
这里只会显示一个按钮
&lt;div id=&quot;app&quot;&gt;
    &lt;alert&gt;&lt;/alert&gt;
&lt;/div&gt;
app2中不显示内容
&lt;div id=&quot;app2&quot;&gt;
    &lt;alert&gt;&lt;/alert&gt;
    &lt;alert&gt;&lt;/alert&gt;
&lt;/div&gt;
*/
//把控件赋值给一个对象
let Alert = {template:'&lt;button @click=&quot;on_click&quot;&gt;弹弹弹&lt;/button&gt;',
                methods: {
                    on_click: function () {
                        alert('hello world');
                    }
                }
            };
//然后在vue实例中用componets属性把
new Vue({
    el: '#app',
    components:{
        alert:Alert,
    }
});
</code></pre>
<p>这样他就只会在id为app的div中显示，其他div中是不显示的</p>
<p>把组件写在js中总是麻烦，我们也可以把它写在html中</p>
<pre><code class="language-html">&lt;script&gt;
    //新建一个叫like的组件
Vue.component('like',{
    //把在HTML中一个template标签中并且id为#like-cheked里的html内容作为组件内容
    template: '#like-cheked',
    data:function () {
        return{
            like_count:10,
            liked:false,
        }
    },
    //这里是他的方法
    methods: {
        toggle_like:function () {
            if(!this.liked){
                this.like_count++;
            }else{
                this.like_count--;
            }
            this.liked = !this.liked;
        }
    }
});
//一个实例
new Vue({
    el:&quot;#app3&quot;,
});
//当然也可以直接绑定摘app3中
&lt;/script&gt;


&lt;div id=&quot;app3&quot;&gt;
    &lt;like&gt;&lt;/like&gt;
&lt;/div&gt;
&lt;template id=&quot;like-cheked&quot;&gt;
    &lt;button @click=&quot;toggle_like()&quot; :class=&quot;{liked:liked}&quot;&gt;
        👍{{like_count}}
    &lt;/button&gt;
&lt;/template&gt;
</code></pre>
<h4 id="组件通信-父子通信">组件通信--父子通信</h4>
<p><code>props:</code>属性.</p>
<pre><code class="language-html">&lt;div id=&quot;app&quot;&gt;
    &lt;!-- msg 和username都是要传的参数 --&gt;
    &lt;alert msg=&quot;liujunjie&quot;&gt;&lt;/alert&gt;
    &lt;user username=&quot;刘俊杰&quot;&gt;&lt;/user&gt;
&lt;/div&gt;

&lt;script src=&quot;js/vue.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
    Vue.component('alert',{
        template:'&lt;button @click=&quot;on_click()&quot;&gt;弹弹弹&lt;/button&gt;',
        //把传入的参数用props属性接收
        props:['msg'],
        methods: {
            on_click:function () {
                //可以用this直接使用
                alert(this.msg);
            }
        }
    });
    Vue.component('user',{
        //同样使用props接收传入的参数，然后在组件中使用
        template: '&lt;a :href=&quot;\'/user/\'+username&quot;&gt;{{username}}&lt;/a&gt;',
        props: ['username'],
    });
    let app = new Vue({
        el:&quot;#app&quot;,
    })
&lt;/script&gt;
</code></pre>
<h4 id="组件通信-子父通信">组件通信--子父通信</h4>
<pre><code class="language-html">&lt;div id=&quot;app&quot;&gt;
    &lt;balance&gt;&lt;/balance&gt;
&lt;/div&gt;

&lt;script&gt;

    //这是一个父级组件balance
    Vue.component('balance',{
        //使用了子级组件show  用v-if来控制显示与否
        template:`
            &lt;div&gt;
                &lt;show @show-balance=&quot;show_balance = true&quot;&gt;&lt;/show&gt;
                &lt;div v-if=&quot;show_balance&quot;&gt;还剩98元&lt;/div&gt;
            &lt;/div&gt;
        `,
        data:function () {
            return{
                //定义一个属性控制v-if 默认为false 点击后变成true即可显示余额
                show_balance:false,
            }
        }
    });
    //这是一个子级的组件
    Vue.component('show',{
        template: `
			&lt;button @click=&quot;on_click()&quot;&gt;显示余额&lt;/button&gt;
		`,
        methods: {
            on_click(){
                // 传递参数
                this.$emit('show-balance',{a: 1, b: 2});
            }
        }
    });


    let app = new Vue({
        el:&quot;#app&quot;,
        data:{

        },
        methods:{

        }
    })
&lt;/script&gt;
</code></pre>

                    </div>
                </article>
            </div>

            
            <div class="next-post">
                <div class="next gt-c-content-color-first">下一篇</div>
                <a href="http://www.myalger.ml/AN_GJEO/" class="post-title gt-a-link">
                     Android计算器案例🤖
                </a>
            </div>
            

            
            <span id="/JAB_FEMKG/" class="leancloud_visitors" data-flag-title="JavaScript----Vue.js基础学习 🚀">
                <em class="post-meta-item-text">阅读量 </em>
                <i class="leancloud-visitors-count">0</i>
            </span>
            

            

            
            <script src='https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js'></script>

<style>
	div#vcomments{
		width:100%;
		max-width: 1000px;
		padding: 2.5%
	}
</style>


	<div id="vcomments"></div>

<script>
	new Valine({
		el: '#vcomments',
		appId: 'zSod8O6f9ppLFYxB5PgGNotJ-gzGzoHsz',
		appKey: 'zPFYmL2RAeARE6sTWFnHfJg7',
		avatar: 'retro',
		pageSize: 10,
		recordIp: true,
		placeholder: 'Just Go Go',
		visitor: true,
	});
</script>

            

            <div class="site-footer gt-c-content-color-first">
    <div class="slogan gt-c-content-color-first">春风得意马蹄疾,一日看尽长安花.
</div>
    <div class="social-container">
        
            
        
            
        
            
        
            
        
            
        
            
        
    </div>
    <div class="footer-info">
        Powered by <a href="https://github.com/getgridea/gridea" target="_blank">Gridea</a>
    </div>
    <div>
        Theme by <a href="https://imhanjie.com/" target="_blank">imhanjie</a>, Powered by <a
                href="https://github.com/getgridea/gridea" target="_blank">Gridea | <a href="http://www.myalger.ml/atom.xml" target="_blank">RSS</a></a>
    </div>
</div>

<script>
  hljs.initHighlightingOnLoad()
</script>

        </div>
    </div>
</body>

</html>